﻿<MCard
    Class="mx-auto"
    MaxWidth="500">
    <MToolbar
        Color="deep-purple accent-4"
        Dark>
        <MAppBarNavIcon></MAppBarNavIcon>

        <MToolbarTitle>New Chat</MToolbarTitle>

        <MSpacer></MSpacer>

        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>
    </MToolbar>

    <MList Subheader>
        <MSubheader>Recent chat</MSubheader>

        @foreach (var chat in recent)
        {
            <MListItem>
                <MListItemAvatar>
                    <MImage
                        alt="@($"{chat.title} avatar")"
                        Src="@chat.avatar">
                    </MImage>
                </MListItemAvatar>

                <MListItemContent>
                    <MListItemTitle>@chat.title</MListItemTitle>
                </MListItemContent>

                <MListItemIcon>
                    <MIcon Color="@(chat.active ? "deep-purple accent-4" : "grey")">
                        mdi-message-outline
                    </MIcon>
                </MListItemIcon>
            </MListItem>
        }
    </MList>

    <MDivider></MDivider>

    <MList Subheader>
        <MSubheader>Previous chats</MSubheader>

        @foreach (var chat in previous)
        {
            <MListItem>
                <MListItemAvatar>
                    <MImage
                        alt="@($"{chat.title} avatar")"
                        Src="@chat.avatar">
                    </MImage>
                </MListItemAvatar>

                <MListItemContent>
                    <MListItemTitle>@chat.title</MListItemTitle>
                </MListItemContent>
            </MListItem>
        }
    </MList>
</MCard>

@code {

    List<(bool active, string avatar, string title)> recent = new List<(bool active, string avatar, string title)>()
    {
        new(true, "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/1.png", "Jason Oner"),
        new(true, "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/2.png", "Mike Carlson"),
        new(false, "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/3.png", "Cindy Baker"),
        new(false, "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/4.png", "Ali Connors"),
    };

    List<(string title, string avatar)> previous = new List<(string title, string avatar)>()
    {
        new("Travis Howard", "https://cdn.masastack.com/stack/images/website/masa-blazor/lists/5.png")
    };

}